<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="1000px"
    @open="handleDialogOpen()"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="ReservationModel"
      :rules="formEval"
      ref="ReservationForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="tionName">
            <el-input
              ref="tionName"
              :maxlength="32"
              v-model="ReservationModel.tionName"
              autofocus
            ></el-input>
          </el-form-item>

          <el-form-item label="身份证" prop="tionIdcar">
            <el-input
              ref="tionIdcar"
              :maxlength="32"
              v-model="ReservationModel.tionIdcar"
            ></el-input>
          </el-form-item>

          <el-form-item label="出生日期" prop="tionBirth">
            <el-date-picker
              style="width:162px;"
              v-model="ReservationModel.tionBirth"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="手机号" prop="tionPhone">
            <el-input
              ref="tionPhone"
              resize="none"
              v-model="ReservationModel.tionPhone"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="tionSex">
            <el-radio-group v-model="ReservationModel.tionSex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄" prop="tionAge">
            <el-input
              max="100"
              min="1"
              ref="tionAge"
              resize="none"
              type="number"
              v-model="ReservationModel.tionAge"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="tionMarital">
            <el-radio-group v-model="ReservationModel.tionMarital">
              <el-radio label="已婚"></el-radio>
              <el-radio label="未婚"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="预约时间" prop="tionApptime">
            <el-date-picker
              style="width:162px;"
              v-model="ReservationModel.tionApptime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="选择套餐">
            <el-select v-model="mealid">
              <el-option
                v-for="item in setmeals"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item>
            <el-input
              style="width:200px;"
              placeholder="检测套餐"
              v-model="search.value"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getmealList()"
              ></el-button>
            </el-input>

            <el-table
              :data="mealList"
              border
              size="mini"
              header-cell-class-name="header-row"
            >
              <el-table-column
                prop="name"
                label="套餐名称"
                header-align="center"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="sex"
                :formatter="judgeSex"
                label="适用人群"
                header-align="center"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="remark"
                label="套餐介绍"
                header-align="center"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[7, 14, 21]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mealTotal"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        size="small"
        @click="submitForm('ReservationForm')"
        >保 存</el-button
      >
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addReservation } from "@/api/Appointment/reservation";
import { mealList } from "@/api/Appointment/setmeal";

export default {
  name: "role-edit",
  data() {
    return {
      mealTotal: "",

      mealid: "",
      setmeals: [],

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀"
        }
      ],
      ReservationModel: [
        {
          id: "",
          tionApptime: "",
          tionName: "",
          tionIdcar: "",
          tionPhone: "",
          tionMarital: "",
          tionBirth: "",
          tionSex: "",
          tionAge: ""
        }
      ],
      mealList: [],
      search: {
        value: "",
        offset: 1,
        limit: 7
      },

      //加载
      locked: false,

      dialogProps: {
        visible: false,
        action: "",
        title: ""
      },
      formEval: {
        tionName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ],
        tionIdcar: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          { min: 18, max: 18, message: "请输入18为数", trigger: "blur" }
        ],
        tionPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //判断性别
    judgeSex(row, column) {
      if (row.sex == 0) {
        return "不限";
      } else if (row.sex == 1) {
        return "男";
      } else {
        return "女";
      }
    },

    //查询套餐
    getmealList() {
      this.loading = true;
      mealList(this.search)
        .then(response => {
          this.mealTotal = response.data.total;
          this.mealList = response.data.rows;
          this.setmeals = response.data.rows;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveRole();
          } else {
            this.doUpdateRole();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateRole() {
      updateEval(this.ReservationModel.id, this.ReservationModel)
        .then(response => {
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("修改失败");
        });
    },
    doSaveRole() {
      addReservation(this.ReservationModel, this.mealid)
        .then(response => {
          this.locked = false;
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("添加失败");
        });
    },

    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["ReservationForm"].clearValidate();
        this.$refs["tionName"].focus();
      });
    },

    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.getmealList();
    },

    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.getmealList();
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditReservationDialog", function(eModel) {
        this.ReservationModel = eModel;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "编辑";
        this.dialogProps.visible = true;
      });
      this.$on("openAddReservationDialog", function() {
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.ReservationModel = {
          tionSex: "男",
          tionMarital: "已婚"
        };
        this.dialogProps.visible = true;
      });
    });
  },
  //初始化
  created() {
    this.getmealList();
  }
};
</script>

<style scoped>
</style>